<template>
  <div class="h100">
    <div class="headArea">
      <el-date-picker
        v-model="datepicker" size="mini"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="" size="mini" @click="getMsgList">加载</el-button>
    </div>
    <div class="bodyArea">
      <WxMsg :msgList="msgList" @scroll="scroll">
        <template slot="emptyImg">
          <el-empty :image="noData.src" :image-size="280">
            <div slot="description">
              <b class="">暂无记录</b>
            </div>
          </el-empty>
        </template>
        <div slot="suffix" slot-scope="scope">
          <span class="text-blue">来自：{{ scope.data.appName }}</span>
          <el-button type="warning" size="mini" @click="addRight($event,scope.data)">向右添加
            <i class="fa fa-fw fa-long-arrow-right"></i>
          </el-button>
        </div>
      </WxMsg>
    </div>
    <div class="footArea">
      <el-button type="" size="mini" @click="addAll">全选(慎用)</el-button>
      <template v-if="isDev">
        {{ `esId:${esId};cusId:${cusId}` }}
      </template>
    </div>
  </div>
</template>

<script>
import { CommonPicturePackage } from '../../assets/CommonPicturePackage.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name:"msgSource",
  components: {
    WxMsg:()=>{ return import('./../../components/wx_msgArea');},
  },
  props:{
    esId:{
      type:String,
      default:function(){ return '' }
    },
    cusId:{
      type:String,
      default:function(){ return '' }
    },
  },
  data() {
    return {
      isDev:process.env.NODE_ENV== 'development',
      noAgent: CommonPicturePackage.noAgent,
      noData: CommonPicturePackage.noData,
      datepicker:null,
      msgList:[],
    }
  },
  methods:{
    addRight(e,item){
      console.log(e)
      console.log(item)
      this.$emit('addRight',item)
    },
    scroll(v) {
      if( v === "Top" ){}
      return;
    },//滚动时处理函数，一般收到的参数是Top或Bottom
    msgFormat(sMsg) {
      function reMsgFace(tVue,obj) {
        let app = tVue.$store.getters.getAppInfo({
          pid: obj.esId, aid: obj.appId
        })
        if (app == null) { return null }
        return obj.isMe ? app.icon : obj.avatar;
      }
      return {
        chatMsgId: sMsg.chatMsgId, //消息ID
        cusId: sMsg.userId, //客户id,
        face: reMsgFace(this,sMsg),//客户头像,
        esId: sMsg.esCompanyId || sMsg.msg.esCompanyId,// 平台id
        esName: sMsg.companyEmployeeName || sMsg.msg.companyEmployeeName,// 平台id
        appId: sMsg.agentID, //应用ID,
        appName: sMsg.agentName,// 应用名称
        isMe: !sMsg.isFromCustomer,//是否是客户发送的消息,转反,定义为是否己方发出
        addTime: sMsg.createTimeDate, //发言时间
        msg: sMsg.msg
      }
    },//消息格式化，用于各种方法中
    clearMsgList(){
      this.msgList.splice(0, this.msgList.length)
    },
    getMsgList(){
      let opt = {
        eSCompanyId:this.esId,
        usersId:this.cusId,
        agentid:0,//沿用之前接口的参数，这里无特殊意义
        // chatTime:'',
      }
      this.$api.getDialogueHistory(opt).then((res) => {
        // console.log(res)
        this.clearMsgList();
        let arr = res.data.data.map((v) => {
          return this.msgFormat(v)
        })

        return Promise.resolve(arr);//请求的数据返回值，注意该数组是时间倒序
      }).then((res) => {
        // console.log(res)
        res.reverse().forEach((v) => { this.msgList.push(v); })
      })
    },
    addAll(){
      this.$emit('add','all')
    },
  },
}
</script>

<style lang="less" scoped>
.h100{
  height:100%;
}
@hh:36px;@fh:36px;
.headArea{
  position: absolute;
  left:0;right:0;
  top:0;
  height:@hh;
}
.bodyArea{
  position: absolute;
  top:@hh;bottom:@fh;
  left:0;right:0;
}
.footArea{
  position: absolute;
  left:0;right:0;
  bottom:0;
  height:@fh;
}
.text-blue{
  color:#409eff;
}
</style>